<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport">
    <title>商品详情</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <style>
        .arrow-bottom.bb {
            transform: rotate(180deg)
        }

        .box-1 {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            width: 3.75rem;
            /* height: 1.65rem; */
            background: #fff;
            box-sizing: border-box;
            padding: .12rem;
        }

        .box-1 p {
            height: .47rem;
            justify-content: space-between;
            align-items: center;

            font-size: .16rem;
            color: rgba(18, 18, 18, 0.9);
        }

        .box-1 p span {
            flex: 1;
            margin-right: .08rem;
            text-align: right;
        }

        .box-1 p em {
            font-size: .14rem;
            flex: 6;
            color: rgba(255, 0, 0, 0.9);
        }

        .box-1 p input {
            color: rgba(18, 18, 18, 0.25);
            font-size: .14rem;
            flex: 6;
        }

        .box-1 .button {
            margin-top: .08rem;
            justify-content: space-between;
            align-items: center;
        }

        .box-1 .button span {
            width: 1.6rem;
            line-height: .32rem;
            display: block;
            text-align: center;
        }

        .box-1 .button .button-1 {
            background: rgba(255, 0, 0, 1);
            color: rgba(255, 255, 255, 1);
            font-size: .14rem;
        }

        .box-1 .button .button-2 {
            background: rgba(101, 180, 15, 1);
            color: rgba(255, 255, 255, 1);
            font-size: .14rem;
        }

        .box-1 .tip {
            height: auto;
            color: rgba(18, 18, 18, 0.25);
            font-size: .08rem;
            justify-content: space-between;
            align-items: center;
        }

        .box-1 .tip span {
            background: url(../img/起@2x.png) no-repeat left;
            padding-left: .11rem;
            background-size: .09rem .11rem;
            text-align: left;
        }

        .box-1 .tip em {
            flex: none;
            color: rgba(18, 18, 18, 0.25);
            font-size: .12rem;
        }

        .box-2,
        .box-3 {
            width: 100;
            /* height: 1.65rem; */
            background: #fff;
            box-sizing: border-box;
            padding: .12rem;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .box-2 .t1 {
            font-size: .14rem;
            color: rgba(18, 18, 18, 0.9);
            margin-bottom: 8px;
        }

        .box-2 div {
            justify-content: space-between;
            align-items: center;
        }

        .box-2 div input {
            box-sizing: border-box;
            width: 1.4rem;
            line-height: .48rem;
            padding: .12rem;
            border: none;
            background: #fff;
            color: rgba(18, 18, 18, 1);
            font-size: .16rem;
        }

        .box-2 div span {
            text-align: center;
            display: block;
            width: 1.99rem;
            line-height: .48rem;
            background: rgba(18, 18, 18, 0.08);
        }

        .box-2 .t2 {
            font-size: .12rem;
            color: rgba(18, 18, 18, 0.9);
            text-align: right;
        }

        .box-2 .button,
        .box-3 .button {
            color: rgba(255, 255, 255, 1);
            font-size: .14rem;
            text-align: center;
            line-height: .32rem;
            width: 3.51rem;
            display: block;
            margin: 0 auto;
            background: rgba(95, 49, 4, 1);
            margin-top: .08rem;
        }

        .box-3 .t1 {
            font-size: .14rem;
            color: rgba(18, 18, 18, 0.9);
            margin-bottom: 8px
        }

        .box-3 div input {
            box-sizing: border-box;
            width: 3.51rem;
            line-height: .48rem;
            background: #fff;
            padding: 0 .12rem;
            color: rgba(18, 18, 18, 1);
        }

        .box-3 .t2 {
            font-size: .12rem;
            color: rgba(18, 18, 18, 0.9);
            text-align: right;
        }
        .e2s{
            margin-left: .16rem;
            padding-left: .16rem;
            background: url('../img/收藏 01@2x.png') no-repeat left;
            background-size: .14rem;
        }
        .e1s{
            padding-left: .16rem;
            background: url('../img/热度 01@2x.png') no-repeat left;
            background-size: .1rem;
        }

    </style>
</head>

<body>
    <!--头部-->
    <div class="public-header flex">
        <!--<span class="public-header-left-search"></span>-->
        <span class="public-header-left-back"></span>
        <span class="public-header-center">投诉记录</span>
        <span class="public-header-right" onclick='javascript:window.location.href="../page/My-footprints.html"'>足迹</span>
    </div>

    <!--正文-->
    <div class="buy-info-page bc-gray" @click='hide()'>
        <img :src="datas.produce_head_image" alt="">
        <!-- <img src="../img/配图@2x.png" alt=""> -->
        <section class="s1">
            <p class="t1">{{datas.produce_describe}} </p>
            <p class="t2">
                <span>{{datas.produce_add_time}}</span>
                <em class="e1" v-if='datas.is_return'>包退</em>
                <em class="e2" v-if="datas.is_free_shipping">包邮</em>
                <em class="e3" v-if="datas.is_Identifiable">可鉴定</em>
            </p>
            <p class="t3">
                <span @click="tsha">投诉</span>
                <em class="e3">{{datas.produce_share_num}}</em>
                <em class="e2"v-show="iscollect" @click='add_Collection(this)'>{{datas.produce_collect_num}}</em>
                <em class="e2s"v-show="!iscollect" @click='add_Collection(this)'>{{datas.produce_collect_num}}</em>
                <em class="e1" v-show="is1" @click='add_good(this)' style="color:#000">{{datas.produce_good_num}}</em>
                <em class="e1s" v-show="!is1"  style="color:#000">{{datas.produce_good_num}}</em>



            </p>
            <p class="t4"><span>距离结束：</span><em>{{down_time}}</em></p>
        </section>
        <section class="s2 flex">
            <img :src="datas.store_image" alt="">
            <div class="right">
                <p style="margin-bottom: 10px;"><span>{{datas.store_name}}</span><em>VIP{{datas.store_level}}</em>
                    <i v-show="isguanzhu" @click="clickGz">未关注</i>
                    <i v-show="!isguanzhu" @click="cancelGz">取消关注</i>
                    <font v-if="datas.store_authority"></font>
                </p>
                <p><span>联系卖家</span><i>{{datas.produce_money}}元</i><em>{{datas.store_score}}分</em></p>
            </div>
        </section>
        <!--最新成交-->
        <section class="s5">
            <p class="t1">
                <span class="t1-1">最新成交人</span>
              <!--  <span class="t1-2">更多</span>-->
            </p>
            <ul>
                <p v-if="datas.RecentTransaction.length == 0">
                    暂无最近成交记录
                </p>
                <p v-else>
                    <li class="flex" :class='{red:$index == 0,gray:$index>0}' v-for='item in datas.RecentTransaction'>
                        <div class="li-1">
                            <img :src="item.user_image" alt="">
                        </div>
                        <div class="li-2">
                            <p class="li-2-1">{{item.user_Name}}</p>
                            <p class="li-2-2">￥{{item.offer}}</p>
                        </div>
                    <div class="li-3">
                        <br> {{item.time}}
                    </div>
                    </li>
                </p>
            </ul>
            <em class="arrow-bottom"></em>
        </section>
        <section class="s6">

        </section>
        <section class="s3 flex">
            <div class="a1">
                <font>起</font><em>￥</em><i>{{datas.starting_price}}</i>
            </div>
            <div class="a2">
                <font>加</font><em>￥</em><i>{{datas.produce_auction_number}}</i>
            </div>
            <div class="a3">
                <font>保</font><em>￥</em><i>{{datas.auction_deposit}}</i>
            </div>
            <div class="a4">
                <font>延</font><em>￥</em><i>0</i>
            </div>
            <div class="a5" >
                <font style="width: .42rem;">一口价</font><em>￥</em><i>{{datas.produce_money}}</i>
            </div>

        </section>
        <section class="s4">
            <p class="">
                <span>店铺产品</span>
                <!--<em>拍卖公告</em>-->

            </p>
            <div>
                <ul class="clearfix">
                    <div style="text-align: center;margin-top: 100px;" v-if="produce_list.length == 0 ">
                        店铺暂无产品
                    </div>
                    <div v-else>
                        <li class="" v-for='item in produce_list'>
                            <img :src="item.produce_head_image" alt="" @click='link_buy(this)'>
                            <p class="t1" v-html="{{item.produce_describe}}">4</p>
                            <p class="t2"><span>￥:{{item.starting_price}}起</span><em @click='add_good(this)' style="color:rgba(18,18,18,0.25)">{{item.produce_good_num}}</em></p>
                        </li>
                    </div>

                </ul>
            </div>
        </section>
    </div>


    <div class="buy-footer">
        <div class="c1" v-if="doing">
            <span @click='join_store(this)'>进店逛逛</span>
            <em>{{death_time}}</em>
        </div>

        <div class="c4" v-else>
            <div class="top">
                <p class="t1">
                    <span style="display:inline-block;background:url('../img/起 红@2x.png') no-repeat center;background-size:contain;width:.16rem;height:.16rem;"></span>
                    <em>￥:{{datas.starting_price}}</em>
                </p>
                <p class="t2">
                    <span>距离结束：</span>
                    <em>{{down_time}}</em>
                </p>
            <!--    <p class="t3">
                    <em class="e1" @click='add_good(this)' style="color:#000;">{{datas.produce_good_num}}</em>
                    <em class="e2" @click='add_Collection(this)'>{{datas.produce_collect_num}}</em>
                    <em class="e3">{{datas.produce_share_num}}</em>
                </p>-->
                <p class="p4">{{datas.produce_describe}} </p>
            </div>
            <div class="bottom flex">
                <span @click='join_store(this)'>进店逛逛</span>
                <div class="center" style="background: #fa4535;color: #fff;" @click="ykj(this,datas.produce_money)">
                    <p class="p1">一口价</p>
                    <p class="p2">￥{{datas.produce_money}}</p>
                </div>
                <em style="background:rgba(95,49,4,1);color:#fff" @click='alertCj()'>出价</em>
            </div>
        </div>
    </div>


    <div class="box-1" v-if="step3" style="display: block">
        <p class="price flex"  v-if="datas.RecentTransaction.length != 0">
            <span>领先价</span>
            <em v-else>{{datas.RecentTransaction[0].offer}}元</em>
        </p>
        <p class="price-self flex" style="background:#fff;">
            <span>出价</span>
            <input type="number" pattern="\d*" placeholder="出价不能低于起价" v-model="cjprice">
        </p>
        <div class="button flex">
            <!--<span class="button-1" >一口价 ￥{{datas.produce_money}}</span>-->
            <span class="button-1"  @click="hideCj">取消</span>
            <span class="button-2" @click='bid()'>确认</span>
        </div>
        <p class="tip flex">
            <span>￥{{datas.starting_price}}</span>
            <em>出价即表示同意《紫陶汇竞拍服务协议》</em>
        </p>
    </div>

    <div class="box-3" v-if="step1" style="display: block;">
        <p class="t1">
            请输入你的电话号码，方便卖家联系
        </p>
        <div class="">
            <input type="number" pattern="\d*" v-model="telphone" placeholder="输入手机号码">
        </div>
        <p class="t2">
            验证号码后才能继续出价
        </p>
        <span class="button" @click='ChangeStepType()'>确认</span>
    </div>

    <div class="box-2" v-if="step2" style="display: block;">
        <p class="t1">
            <span>验证码</span>
            <em>已发送至 {{telphone}}</em>
        </p>
        <div class="flex">
            <input type="number" pattern="\d*" placeholder="验证码" v-model="vInteger_0">
            <span>已发送</span>
        </div>
        <p class="t2">
            验证号码后才能继续出价
        </p>
        <span class="button" @click='vInteger_click(this)'>确认</span>
    </div>


    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>

    <script>
        $(function () {

            $(window).scroll(function () {
                if ($(window).scrollTop() > 50) {
                    $('.buy-footer .c4 .top').css('display',
                        'none')
                } else {
                    $('.buy-footer .c4 .top').css('display',
                        'block')
                }
            });

            var s_id = getQueryString('s_id'),
                p_id = getQueryString('p_id');
            /************************/
            new Vue({
                el: 'body',
                data: {
                    guanzhu: '',
                    down_time: '',
                    price: '',
                    vInteger_0: '',
                    step1: false,
                    step2: false,
                    step3: false,
                    doing: false,
                    death_time: '',
                    isguanzhu:'',
                    uid:'',
                    pid:'',
                    datas:'',
                    storeId:'',
                    cjprice:'',//出价价格,
                    isdianzan:1,
                    iscollect:1,
                    is1:1,
                    produce_good_num:'',
                    produce_collect_num:'',
                    telphone:'',
                    produce_list:[]

                },
                ready: function () {
                    let vm = this;
                    var _self = this;
                    _self.uid = sessionStorage.getItem("uid");
                    _self.pid = getQueryString('p_id');
                    /**
                     * 添加浏览记录
                     * **/
                    this.$http.get(base_url+"ZITAOHUI/store/addBrows",{
                        params:{
                            uid:_self.uid,
                            produceid:_self.pid
                        }
                    }).then(function (res){
                        console.log("添加浏览记录");
                        console.log(res);
                    });





                    /**
                     * 获取拍卖商品详情
                     * **/
                    vm.$http.get(base_url + 'ZITAOHUI/auctionProduce', {
                        params: {
                            produceId: _self.pid,
                            user_id: _self.uid,
                        }
                    }).then(
                        function (response) {
                            //console.log(response);
                            var all_data = response.data.extend.list[0];
                            _self.storeId = all_data.storeId;
                            console.log(_self.storeId);
                            _self.price = all_data.starting_price;
                            vm.$set('datas', all_data);
                            var produce_list = response.data.extend.list4;
                            var guanzhu = response.data.extend.list2;
                            var down_time = response.data.extend.list3[0].surplusTime;
                            _self.getTime(down_time);
//                            vm.$set('a_id', response.data.extend.list3[0].auction_id)
                            vm.$set('produce_list', produce_list);
                            if (guanzhu == 1) {
//                                vm.$set('guanzhu', '已关注')
                                 _self.isguanzhu= 1;
                            } else {
//                                vm.$set('guanzhu', '未关注')
                                _self.isguanzhu = 0;
                            }
                            var RecentTransaction = all_data.RecentTransaction;
                            var add_time = new Date(all_data.produce_add_time);
                            all_data.produce_add_time = add_time.getMonth() + '月' + add_time.getDate() +
                                '日 ' + add_time.getHours() + ':' + add_time.getMinutes();

                            for (var i = 0; i < RecentTransaction.length; i++) {
                                var time = RecentTransaction[i].time;
                                var all_time = new Date(time);
                                RecentTransaction[i].time = all_time.getMonth() + '月' +
                                    all_time.getDate() + '日 ' + all_time.getHours() + ':' +
                                    all_time.getMinutes();

                            }

                            setTimeout(function () {

                                $('.s5 ul li:gt(1)').hide();
                                $('.arrow-bottom').click(function () {
                                    $('.s5 ul li:gt(1)').slideToggle();
                                    $(vm).toggleClass('bb')

                                })

                            }, 80);



                        }
                    )
                },
                methods: {
                    tsha:function (){
                        var _self = this;
                        window.location.href = "Complaints.html?pid="+_self.pid;
                    },
                    alertCj: function (money) {

                        var _self = this;
                        var vm = this;

                        this.$http.get(base_url+"/ZITAOHUI/isfirst",{
                            params:{
                                uid:_self.uid,
                                store_id:_self.storeId,
                                produceId:_self.pid
                            }
                        }).then(function (res){
                            if(res.body.extend.list[0].code == 1){
                                _self.step1 = false;
                                _self.step2 = false;
                                _self.step3 = false;
                                alert("对不起，您已被屏蔽")
                            }else if(res.body.extend.list[0].code == 2 ||res.body.extend.list[0].code == 3 ){
//                                alert("不需要手机验证");
                                console.log("不需要手机验证");
                                _self.step1 = false;
                                _self.step2 = false;
                                _self.step3 = true;
                            }
                        })

                    },
                    hideCj:function (){
                       this.step1 = false;
                       this.step2 = false;
                       this.step3 = false;
                    },
                    clickGz:function (){
                        //点击关注
                        var _self = this;
                        this.$http.get(base_url+"ZITAOHUI/user/addFans",{
                            params:{
                                uid:_self.uid,
                                storeid:_self.storeId
                            }
                        }).then(function (res){
                            console.log(res);
                            if(res.body.code == 1){
                                alert("关注成功");
                                _self.isguanzhu = 0;
                            }else{
                                alert("关注失败");
                                _self.isguanzhu = 1;
                            }
                        })
                    },
                    cancelGz:function (){

                        //取消关注
                        var _self = this;
                        this.$http.get(base_url+"ZITAOHUI/focus/cancel",{
                            params:{
                                uid:_self.uid,
                                storeid:_self.storeId
                            }
                        }).then(function (res) {
                            alert("取消关注成功");
                            _self.isdianzan = 1;
                        })

                    },
                    ChangeStepType: function () {
                        var _self = this;
                        _self.step2 = true;
                        _self.step3 = false;
                        _self.step1 = false;
                    /*    this.$http.get(base_url+"ZITAOHUI/SMSverification",{
                            params:{
                                mobile:_self.telphone
                            }
                        }).then(function (res){
                            if(res.body.code == 1){
                                alert("验证码发送成功");
                                _self.step2 = true;
                                _self.step3 = false;
                                _self.step1 = false;
                            }
                        })*/
                    },

                    link_buy: function (t) {
                        //console.log(t);
                        window.location.href = 'buy-info-page.3.html?p_id=' + t.item.produce_id

                    },
                    ykj:function (t,money){
                        if(money == 0){
                            alert("价格为0不可购买");
                            return false;
                        }
                        var _self = this;
                        window.location.href = 'my-address.html?uid='+_self.uid+'&produceid='+_self.pid+'&price='+_self.price+"&storeId="+_self.storeId+"&orderType=2";
                    },
                    add_good: function (t) {
                        //console.log(t)
                        var _self =  this;
                        this.$http.get(base_url + 'ZITAOHUI/goodNum', {
                            params: {
                                produceId: _self.pid,
                                user_id: _self.uid
                            }
                        }).then(
                            function (data) {
                                //console.log(data)
                                let sun = data.data.extend;
                                sun = sun.haha.list;
                                if (sun == 1) {
                                    _self.produce_good_num += 1;
                                    _self.is1 = 0;
                                } else if (sun == 2) {
                                    alert('网络不好，请稍后再试')
                                    _self.is1  = 1;
                                } else {
                                    alert('您已经对该商品点过赞啦')
                                    _self.is1  = 1;
                                }
                            }
                        )
                    },

                    add_Collection: function (t) {
                        //console.log(t)
                        var _self =this;
                        this.$http.get(base_url + 'ZITAOHUI/conllectionNum', {
                            params: {
                                produceId: p_id,
                                user_id: sessionStorage.getItem("uid")
                            }
                        }).then(
                            function (data) {
                                //console.log(data)
                                let sun = data.data.extend;
                                sun = sun.list.conllection;
                                if (sun == 1) {
                                    _self.produce_collect_num += 1;
                                    _self.iscollect = 0;
                                } else if (sun == 2) {
                                    alert('网络不好，请稍后再试');
                                    _self.iscollect = 1;
                                } else {
                                    alert('您已经对该商品点过收藏啦');
                                    _self.iscollect = 1;
                                }
                            }
                        )
                    },

                    join_store: function (t) {
                        //console.log(t)
                        window.location.href = "../page/Shop.html?s_id=" + t.datas.storeId
                    },

                    bid: function (t) {
                        console.log(t);
                        //确认出价
                        var _self = this;
//                        alert(_self.datas.RecentTransaction.length);
                        if(_self.cjprice < _self.price + _self.datas.produce_auction_number ){
                            alert("出价必须大于一口价");
                            return false;
                        }

                        if(_self.datas.RecentTransaction.length == 0 ){

                        }else{
                            if(_self.cjprice < _self.datas.RecentTransaction[0].offer+ _self.datas.produce_auction_number){
                                alert("出价必须大于领先价");
                                return false;
                            }
                        }
                        this.$http.get(base_url+"ZITAOHUI/istheFirstOfer",{
                            params:{
                                user_id:_self.uid,
                                produceId:_self.pid,
                                store_id:_self.storeId,
                                money:_self.cjprice
                            }
                        }).then(function (sss){
                            console.log("hahha");
                            console.log(sss);
                            if(sss.body.code == 1){
                                alert("出价成功");
                                _self.step1 = false;
                                _self.step2 = false;
                                _self.step3 = false;
                            }
                        })


//                        if (this.price >= this.datas.RecentTransaction[0].offer + this.datas.produce_auction_number) {
//                            $.ajax({
//                                url: base_url + 'ZITAOHUI/istheFirstOfer',
//                                data: {
//                                    produceId: this.a_id,
//                                    user_id: u_id,
//                                    store_id: s_id,
//                                    money: this.price
//                                },
//                                success: (data) => {
//                                    //console.log(data)
//                                    alert(data.extend.list[0].msg)
//                                    this.step3 = false;
//                                }
//                            })
//                        }

                    },

                    vInteger_click: (t) => {
//                        var _self  = this;
//                        _self.step1 = false;
//                        _self.step2 = false;
//                        _self.step3 = true;

                        $.ajax({
                            url: base_url + 'ZITAOHUI/phoneVi',
                            data: {
                                value: t.vInteger_0,
                                mobile:t.telphone
                            },
                            success: (data) => {

                                //console.log(data)
                                if (data.code == 1 ) {
//                                    alert(data.extend.msg);
                                    alert(1);
                                    t.step2 = false;
                                    t.step3 = true;
//                                    _self.step1 = false;
//                                    _self.step2 = false;
//                                    _self.step3 = true;
                                    $(".box-1").show();
                                }
                            }
                        })
                    },

                    hide: function () {
                        this.step1 = false;
                        this.step2 = false;
                        this.step3 = false;
                    },
                    getTime:function (mss) {
                        var _self = this;
                        var maxtime =  mss/ 1000;//剩余秒
                        var timer = setInterval(function () {
                            if (maxtime >= 0) {
                                var dd = parseInt(maxtime / 60 / 60 / 24, 10);//计算剩余的天数
                                var hh = parseInt(maxtime / 60 / 60 % 24, 10);//计算剩余的小时数
                                var mm = parseInt(maxtime / 60 % 60, 10);//计算剩余的分钟数
                                var ss = parseInt(maxtime % 60, 10);//计算剩余的秒数
                                hh = checkTime(hh);
                                mm = checkTime(mm);
                                ss = checkTime(ss);
                               var  msg = dd + "天" + hh + "时" + mm + "分" + ss + "秒";
                               //console.log(msg);
                               _self.down_time = msg;
                                --maxtime;
                            }else {
                                clearInterval(timer);
                                _self.down_time = "已结束";
                            }
                        },1000);
                    }
                }
            })
        })
        function checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }
    </script>

</body>

</html>